<template>
    <div class="home_link">
        <div class="header">
            <HeaderBar></HeaderBar>
        </div>
        <div class="main">
            <Banner
                :slide="banner"
            >
            </Banner>
            <MenuList
                :menuList="menu"
            ></MenuList>
            <TabBar
                :tabBar="nav"
                @change="tabChange"
            ></TabBar>
            <ProductList
                :productLists="product"
            ></ProductList>
        </div>
        <div class="footer">
            <FooterBar/>
        </div>
    </div>
</template>

<script>
import HeaderBar from './component/HeaderBar';
import Banner from './component/Banner';
import MenuList from './component/MenuList'
    export default {
        name:'Home',
        components:{
            HeaderBar,
            Banner,
            MenuList
        },
        data() {
            return {
                banner:[],
                menu:[],
                nav:[],
                product:[],
                fetchParams:{
                    page:0,
                    page_size:5,
                    branid:1
                }
            }
        },
        created() {
            this.initData()
        },
        watch: {
            fetchParams:{
                handler:function() {
                    this.getProductList()
                }
            }
        },
        methods: {
            initData() {
                const servers = [
                    this.$api.home.banner(),
                    this.$api.home.menu(),
                    this.$api.home.nav()
                ]
                Promise.all(servers).then(([banner,menu,nav]) => {
                    console.log(nav.data.data,'nav=====nav')
                    this.banner = banner.data.data;
                    this.menu = menu.data.data;
                    this.nav = nav.data.data;
                });
                this.getProductList({
                    branid: 1
                })
            },
            async getProductList(params) {
                const list = await this.$api.product.product(params);
                  this.product = list.data.data
                // if(this.fetchParams.page === 0) {
                //     this.product = list.data.data
                // } else {
                //     this.product = this.product.concat(list.data.data)
                // }
            },
            // tabBar 派发过来的函数
            tabChange(item) {
                console.log(item,'item')
                this.getProductList({
                    branid:item.id
                })
            }
        },
    }
</script>

<style lang="scss" scoped>
.home_link{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .header{
        width: 100%;
        height: 35px;
        background: #eee;
    }
    .main{
        flex:1;
        overflow: auto;
        .tab_bar {
            display: flex;
        }
    }
    .footer{
        width: 100%;
        height: 45px;
    }
}
</style>